<template>
  <div class="appointment-management">
    <div class="page-header">
      <h2>预约管理</h2>
      <div class="appointment-filter">
        <button 
          :class="{ active: filter === 'pending' }"
          @click="filter = 'pending'"
        >
          待处理 ({{ pendingAppointments.length }})
        </button>
        <button 
          :class="{ active: filter === 'accepted' }"
          @click="filter = 'accepted'"
        >
          已接受 ({{ acceptedAppointments.length }})
        </button>
        <button 
          :class="{ active: filter === 'rejected' }"
          @click="filter = 'rejected'"
        >
          已拒绝 ({{ rejectedAppointments.length }})
        </button>
      </div>
    </div>

    <!-- 预约列表 -->
    <div class="appointment-list">
      <div 
        v-for="appointment in filteredAppointments" 
        :key="appointment.id" 
        class="appointment-card"
        :class="appointment.status"
      >
        <div class="appointment-header">
          <div class="farmer-info">
            <h3>{{ appointment.farmerName }}</h3>
            <span class="phone">{{ appointment.phone }}</span>
          </div>
          <div class="appointment-status" :class="appointment.status">
            {{ getStatusText(appointment.status) }}
          </div>
        </div>

        <div class="appointment-details">
          <div class="detail-item">
            <span class="label">预约类型：</span>
            <span class="value">{{ appointment.type === 'online' ? '线上答疑' : '线下预约' }}</span>
          </div>
          <div class="detail-item">
            <span class="label">问题描述：</span>
            <span class="value">{{ appointment.problem }}</span>
          </div>
          <div v-if="appointment.type === 'online'" class="detail-item">
            <span class="label">预约时间：</span>
            <span class="value">{{ appointment.appointmentTime }}</span>
          </div>
          <div v-if="appointment.type === 'offline'" class="detail-item">
            <span class="label">预约地点：</span>
            <span class="value">{{ appointment.location }}</span>
          </div>
          <div class="detail-item">
            <span class="label">提交时间：</span>
            <span class="value">{{ appointment.submitTime }}</span>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div v-if="appointment.status === 'pending'" class="appointment-actions">
          <button class="btn accept-btn" @click="acceptAppointment(appointment.id)">
            <i class="fas fa-check"></i> 接受预约
          </button>
          <button class="btn reject-btn" @click="showRejectModal(appointment.id)">
            <i class="fas fa-times"></i> 拒绝预约
          </button>
        </div>

        <!-- 拒绝原因显示 -->
        <div v-if="appointment.status === 'rejected' && appointment.rejectReason" class="reject-reason">
          <strong>拒绝原因：</strong> {{ appointment.rejectReason }}
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-if="filteredAppointments.length === 0" class="empty-state">
      <div class="empty-icon">📅</div>
      <h3>暂无{{ getFilterText() }}预约</h3>
    </div>

    <!-- 拒绝预约模态框 -->
    <div v-if="showRejectReasonModal" class="modal-overlay">
      <div class="modal">
        <h3>拒绝预约</h3>
        <p>请填写拒绝原因：</p>
        <textarea v-model="rejectReason" rows="4" placeholder="请输入拒绝原因..."></textarea>
        <div class="modal-actions">
          <button class="btn secondary-btn" @click="closeRejectModal">取消</button>
          <button class="btn reject-btn" @click="rejectAppointment" :disabled="!rejectReason">
            确认拒绝
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const filter = ref('pending')
const showRejectReasonModal = ref(false)
const currentAppointmentId = ref(null)
const rejectReason = ref('')

const appointments = ref([
  {
    id: 1,
    farmerName: '张农夫',
    phone: '138****1234',
    type: 'online',
    problem: '我的西红柿最近出现了白粉病，请问有什么有效的防治方法吗？',
    appointmentTime: '2024-01-25 14:30',
    submitTime: '2024-01-20 09:15',
    status: 'pending'
  },
  {
    id: 2,
    farmerName: '李农户',
    phone: '139****5678',
    type: 'offline',
    problem: '关于果树修剪技术的现场指导需求',
    location: '北京市朝阳区农业技术推广站',
    submitTime: '2024-01-19 16:20',
    status: 'pending'
  },
  {
    id: 3,
    farmerName: '王种植户',
    phone: '136****9012',
    type: 'online',
    problem: '黄瓜病虫害防治咨询',
    appointmentTime: '2024-01-24 10:00',
    submitTime: '2024-01-18 11:30',
    status: 'accepted'
  },
  {
    id: 4,
    farmerName: '赵农场主',
    phone: '137****3456',
    type: 'offline',
    problem: '土壤改良技术现场考察',
    location: '河北省石家庄市',
    submitTime: '2024-01-17 14:45',
    status: 'rejected',
    rejectReason: '时间冲突，无法安排'
  }
])

const pendingAppointments = computed(() => 
  appointments.value.filter(a => a.status === 'pending')
)
const acceptedAppointments = computed(() => 
  appointments.value.filter(a => a.status === 'accepted')
)
const rejectedAppointments = computed(() => 
  appointments.value.filter(a => a.status === 'rejected')
)

const filteredAppointments = computed(() => {
  switch (filter.value) {
    case 'pending': return pendingAppointments.value
    case 'accepted': return acceptedAppointments.value
    case 'rejected': return rejectedAppointments.value
    default: return appointments.value
  }
})

const getStatusText = (status) => {
  const statusMap = {
    'pending': '待处理',
    'accepted': '已接受',
    'rejected': '已拒绝'
  }
  return statusMap[status] || '未知状态'
}

const getFilterText = () => {
  const filterMap = {
    'pending': '待处理',
    'accepted': '已接受',
    'rejected': '已拒绝'
  }
  return filterMap[filter.value] || ''
}

const acceptAppointment = (id) => {
  const appointment = appointments.value.find(a => a.id === id)
  if (appointment) {
    appointment.status = 'accepted'
    // 在实际应用中，这里应该调用API更新状态
  }
}

const showRejectModal = (id) => {
  currentAppointmentId.value = id
  showRejectReasonModal.value = true
}

const rejectAppointment = () => {
  const appointment = appointments.value.find(a => a.id === currentAppointmentId.value)
  if (appointment) {
    appointment.status = 'rejected'
    appointment.rejectReason = rejectReason.value
    closeRejectModal()
    // 在实际应用中，这里应该调用API更新状态
  }
}

const closeRejectModal = () => {
  showRejectReasonModal.value = false
  currentAppointmentId.value = null
  rejectReason.value = ''
}

onMounted(() => {
  // 可以在这里加载预约数据
})
</script>

<style scoped>
.appointment-management {
  padding: 20px;
}

.page-header {
  margin-bottom: 30px;
}

.appointment-filter {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}

.appointment-filter button {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.appointment-filter button.active {
  background: #4CAF50;
  color: white;
  border-color: #4CAF50;
}

.appointment-list {
  display: grid;
  gap: 20px;
}

.appointment-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  border-left: 4px solid #FF9800;
}

.appointment-card.accepted {
  border-left-color: #4CAF50;
}

.appointment-card.rejected {
  border-left-color: #f44336;
}

.appointment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.farmer-info h3 {
  margin: 0 0 5px 0;
  color: #333;
}

.phone {
  color: #666;
  font-size: 14px;
}

.appointment-status {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.appointment-status.pending {
  background: #FFF3E0;
  color: #EF6C00;
}

.appointment-status.accepted {
  background: #E8F5E9;
  color: #2E7D32;
}

.appointment-status.rejected {
  background: #FFEBEE;
  color: #C62828;
}

.appointment-details {
  margin-bottom: 15px;
}

.detail-item {
  display: flex;
  margin-bottom: 8px;
}

.label {
  font-weight: 600;
  color: #555;
  min-width: 80px;
}

.value {
  color: #333;
  flex: 1;
}

.appointment-actions {
  display: flex;
  gap: 10px;
}

.accept-btn {
  background: #4CAF50;
  color: white;
}

.reject-btn {
  background: #f44336;
  color: white;
}

.reject-reason {
  margin-top: 10px;
  padding: 10px;
  background: #FFEBEE;
  border-radius: 4px;
  color: #C62828;
  font-size: 14px;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background: white;
  border-radius: 8px;
  padding: 25px;
  width: 90%;
  max-width: 500px;
}

.modal textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 15px 0;
  font-family: inherit;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.secondary-btn {
  background: #f5f5f5;
  color: #333;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}

.empty-icon {
  font-size: 60px;
  margin-bottom: 20px;
}
</style>